import React, { useState } from 'react';
import { Form, Input, Button, Card, message, Typography, Alert } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { userService } from '../services/userService';
import type { LoginData, UserType } from '../services/userService';
import '../App.css';

const { Title, Text } = Typography;

const AdminLogin: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [showError, setShowError] = useState(false);
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const handleLogin = async (values: any) => {
    setLoading(true);
    try {
      // 准备管理员登录数据
      const loginData: LoginData = {
        email: values.username,
        password: values.password,
        rememberMe: values.rememberMe || false,
        userType: 'admin' // 指定为管理员类型
      };

      const response = await userService.login(loginData);
      message.success('管理员登录成功');
      // 保存token和用户信息到localStorage
      localStorage.setItem('token', response.token);
      localStorage.setItem('userInfo', JSON.stringify(response.user));
      localStorage.setItem('loginMode', 'admin');
      
      // 管理员登录后跳转到管理员首页
      navigate('/admin');
    } catch (error) {
      message.error('管理员登录失败，请检查用户名和密码');
      setShowError(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ 
      minHeight: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      padding: '20px',
      background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)'
    }}>
      <Card 
        style={{ 
          width: 400, 
          boxShadow: '0 10px 30px rgba(0,0,0,0.1)',
          borderRadius: '12px',
          overflow: 'hidden'
        }}
      >
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <Title level={2} style={{ color: '#1890ff', marginBottom: 8 }}>系统管理员登录</Title>
          <Text type="secondary">仅限管理员访问</Text>
        </div>

        {showError && (
          <Alert
            message="登录失败"
            description="请确认您拥有管理员权限并输入正确的凭证"
            type="error"
            showIcon
            style={{ marginBottom: 16 }}
            closable
            afterClose={() => setShowError(false)}
          />
        )}
        
        <Form
          form={form}
          name="adminLogin"
          layout="vertical"
          onFinish={handleLogin}
        >
          {/* 用户名输入 */}
          <Form.Item
            name="username"
            label="管理员用户名"
            rules={[{ required: true, message: '请输入管理员用户名' }]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder="请输入管理员用户名"
              size="large"
            />
          </Form.Item>
          
          {/* 密码输入 */}
          <Form.Item
            name="password"
            label="管理员密码"
            rules={[{ required: true, message: '请输入管理员密码' }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入管理员密码"
              size="large"
            />
          </Form.Item>
          
          {/* 记住我选项 */}
          <Form.Item name="rememberMe" valuePropName="checked" noStyle>
            <Text style={{ color: '#8c8c8c' }}>记住我</Text>
          </Form.Item>
          
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: '100%', height: 40, fontSize: 16 }}
              loading={loading}
            >
              管理员登录
            </Button>
          </Form.Item>
          
          <div style={{ textAlign: 'center', marginTop: 16 }}>
            <Text>
              返回普通用户登录? <a href="/login" style={{ color: '#1890ff' }}>普通登录</a>
            </Text>
          </div>
        </Form>
      </Card>
    </div>
  );
};

export default AdminLogin;